<template>
    <div class="container">
        <el-row>
            <el-breadcrumb separator="/">
                <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
                <el-breadcrumb-item>咨询管理</el-breadcrumb-item>
                <el-breadcrumb-item>用户评价管理</el-breadcrumb-item>
            </el-breadcrumb>
        </el-row>

        <el-row>
            <el-form :inline="true" :model="searchInfo" class="demo-form-inline">
                &nbsp;
                <el-form-item label="咨询师:">
                    <el-select @clear="queryList" size="small" v-model="searchInfo.consultId" filterable
                        @change="queryList" clearable placeholder="根据咨询师筛选">
                        <el-option v-for="item in consultList" :key="item.id" :label="item.name" :value="item.id">
                        </el-option>
                    </el-select>
                </el-form-item>
            </el-form>
        </el-row>

        <el-row>
            <el-table tooltip-effect="light" :cell-style="{ 'text-align': 'center' }"
                :header-cell-style="{ 'text-align': 'center' }" :data="usermarkList" border style="width: 100%">
                <el-table-column width="80" prop="id" label="ID">
                </el-table-column>
                <el-table-column prop="markText" :show-overflow-tooltip="true" label="评价内容">
                </el-table-column>
                <el-table-column prop="consult.name" label="咨询师">
                </el-table-column>
                <el-table-column prop="user.username" label="用户">
                </el-table-column>
                <el-table-column :show-overflow-tooltip="true" label="咨询内容" #default="scope">
                    <span v-html="scope.row.appointment.content"></span>
                </el-table-column>
                <el-table-column label="评分" width="160" #default="scope">
                    <el-rate :value="parseInt(scope.row.markStar)" disabled show-score text-color="#ff9900"
                        score-template="{value}">
                    </el-rate>
                </el-table-column>
                <el-table-column prop="createTime" width="100" label="创建时间">
                </el-table-column>
                <el-table-column fixed="right" label="操作" width="200">
                    <template slot-scope="scope">
                        <el-button type="danger" icon="el-icon-delete" @click="deleteUserMark(scope.row.id)"
                            size="mini">删 除</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </el-row>

        <el-row>
            <el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange"
                :current-page="searchInfo.pageNum" :page-sizes="[1, 5, 10, 20, 50]" :page-size="searchInfo.pageSize"
                layout="total, sizes, prev, pager, next, jumper" :total="total">
            </el-pagination>
        </el-row>
    </div>
</template>

<script>
export default {
    data() {
        return {
            searchInfo: {
                pageNum: 1,
                pageSize: 10,
                consultId: null,
            },
            consultList: [],
            usermarkList: [],
            total: 0,
            visible: false,
        }
    },
    methods: {
        //查询咨询师
        getAllConsult() {
            this.$http.get('consult/findAll')
                .then(res => {
                    if (res.data.status == 200) {
                        this.consultList = res.data.data
                    }
                })
                .catch(err => {
                    console.log('查询咨询师请求异常')
                })
        },

        //动态条件查询用户评价
        queryList() {
            this.$http.get('userMark/page', { params: this.searchInfo })
                .then(res => {
                    if (res.data.status == 200) {
                        this.usermarkList = res.data.data.list
                        this.total = res.data.data.total
                    }
                })
                .catch(err => {
                    this.$message({
                        message: '数据请求异常',
                        type: 'error'
                    })
                })
        },

        //分页尺寸改变
        handleSizeChange(size) {
            this.searchInfo.pageSize = size
            this.queryList()
        },
        //选中页码
        handleCurrentChange(num) {
            this.searchInfo.pageNum = num
            this.queryList()
        },

        //删除用户评价
        deleteUserMark(id) {

            this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                this.$http.delete(`userMark/${id}`)
                    .then(res => {
                        if (res.data.status == 200) {
                            this.$message({
                                message: '删除成功',
                                type: 'success'
                            })
                            this.queryList()
                        } else {
                            this.$message({
                                message: '删除失败',
                                type: 'error'
                            })
                        }
                    })
                    .catch(err => {
                        this.$message({
                            message: '请求异常',
                            type: 'error'
                        })
                    })
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消删除'
                });
            });


        }
    },
    mounted() {
        this.queryList()
        this.getAllConsult()
    }
}
</script>

<style scoped></style>